<template>
  <div class="remark">
    <van-nav-bar @click-left="clickleft" title="添加备注" left-text="返回" left-arrow></van-nav-bar>
    <div class="remark_wrap">
      <textarea maxlength="50" placeholder="请填写备注信息/选填" v-model="message"></textarea>
      <div class="tag-wrap">
        <van-tag
          @click="tagClick(item,index)"
          class="tag-item"
          v-for="(item, index) in tagList"
          :key="index"
          size="large"
          :color="item.select ? '#009eef' : ''"
        >{{item.name}}</van-tag>
        <van-tag
          @click="selectClick(item,index)"
          :color="item.select ? '#009eef' : ''"
          class="tag-item"
          v-for="(item, index) in selectList"
          :key="index"
          size="large"
        >{{item.name}}</van-tag>
      </div>

      <van-button round block type="info" @click="handleClick">保存</van-button>
    </div>
  </div>
</template>

<script>
import { NavBar, Tag, Button, Toast } from "vant";
export default {
  components: {
    [NavBar.name]: NavBar,
    [Tag.name]: Tag,
    [Button.name]: Button,
    [Toast.name]: Toast
  },
  data() {
    return {
      message: this.note|| "",
      tagList: [
        { select: false, name: "不吃葱" },
        { select: false, name: "不吃蒜" },
        { select: false, name: "不吃辣" },
        { select: false, name: "少点辣" },
        { select: false, name: "多点辣" }
      ],
      selectList: [
        { select: false, name: "不要香菜" },
        { select: false, name: "不要洋葱" },
        { select: false, name: "多点葱花" },
        { select: false, name: "多放点醋" }
      ]
    };
  },

  destroyed() {
    this.tagList.forEach((item, index) => {
        item.select=false
      })
      this.selectList.forEach((item, index) => {
        item.select=false
      })
  },
  props:{
    note:String
  },
  methods: {
    clickleft() {
      this.$emit("clickleft", false);
    },
    tagClick(item, index) {
      if (this.message.length >= 50) {
        Toast("最多50个字哦~");
      } else {
        this.message = this.message;
        this.tagList[index].select = true;
        this.message += this.tagList[index].name + " ";
      }
    },
    selectClick(item, index) {
      if (this.message.length >= 50) {
        Toast("最多50个字哦~");
      } else {
        this.message = this.message;
        this.selectList[index].select = true;
        this.message += this.selectList[index].name + " ";
      }
    },
    handleClick(){
      this.$emit('handleClick',{message:this.message,isNote:false})
    }
  }
};
</script>

<style scoped>
.remark {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
.remark_wrap {
  box-sizing: border-box;
  height: calc(100vh - 46px);
  padding: 20px 10px;
  text-align: center;
}
textarea {
  height: 150px;
  width: 90%;
  padding: 10px;
  resize: none;
  color: #666;
  border-radius: 0.08rem;
  font-size: 14px;
}
.van-nav-bar {
  background-color: #009eef;
}
.van-nav-bar__text,
.van-nav-bar .van-icon {
  color: #fff;
}
.tag-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 20px 5px;
}
.tag-item {
  margin-bottom: 15px;
}
</style>